<template>
   <view>
      <u-navbar title="系统头像" autoBack fixed placeholder class="has-bg" rightText="预览" @rightClick="imagePreview"></u-navbar>
      <view class="content">
         <view class="grid" style="background-color: #fff;padding: 10px 0;">
            <view class="grid_item" :class="{border: item.id == selected.id}" v-for="item in items" :key="item.attachName"
               @click="changeAvatar(item)" :style="{width: colWidth, height: colWidth}">
               <image :src="fileUrl + item.attachName" mode="aspectFit"></image>
            </view>
         </view>
         
         <view class="buttons" :style="{paddingBottom: bottom}">
            <view class="button button-primary" @click="setAvatar">设置</view>
         </view>
      </view>
   </view>
</template>

<script>
   import {
      getSysAvatar
   } from '@/api/file.js'
   import {
      changeUserAvatar
   } from '@/api/index.js'
   export default {
      data() {
         return {
            items: [],
            col: 4,
            selected: {}
         }
      },
      computed: {
         colWidth() {
            return (uni.getWindowInfo().windowWidth - 80) / this.col + 'px'
         },
         bottom() {
            return uni.getWindowInfo().safeAreaInsets.bottom + 10 + 'px'
         }
      },
      created() {
         this.getAvatarList()
      },
      methods: {
         getAvatarList() {
            getSysAvatar().then(res => {
               if(res.code === 200) {
                  this.items = res.data
               }
            })
         },
         imagePreview() {
            const urls = []
            let current = 0
            this.items.forEach((avatar, index) => {
               urls.push(this.fileUrl + avatar.attachName)
               if(avatar.id == this.selected.id) {
                  current = index
               }
            })
            uni.previewImage({
               urls: urls,
               current,
               indicator: 'number',
               longPressActions: {
                  itemList: ['设为头像'],
                  success: (index, tapIndex) => {
                     changeUserAvatar(this.$appStore.getStorage('id'), urls[index]).then(res => {
                        uni.hideLoading()
                        this.$toast.show({
                           msg: res.msg
                        })
                        this.$store.dispatch('setAvatar', urls[index])
                     }).catch(err => {
                        uni.hideLoading()
                        this.$toast.show({
                           msg: '网络异常'
                        })
                     })
                  }
               }
            })
         },
         changeAvatar(item) {
            this.selected = item
         },
         setAvatar() {
            uni.showLoading()
            if(this.selected.attachName) {
               changeUserAvatar(this.$appStore.getStorage('id'), this.selected.attachName).then(res => {
                  uni.hideLoading()
                  this.$appStore.setStorage('avatar', this.selected.attachName)
                  this.$store.dispatch('setAvatar', this.selected.attachName)
                  this.$toast.show({
                     msg: res.msg
                  })
               }).catch(err => {
                  uni.hideLoading()
                  this.$toast.show({
                     msg: '网络异常'
                  })
               })
            }else {
               this.$toast.show({
                  msg: '请选择头像'
               })
            }
            
         }
      }
   }
</script>

<style lang="scss" scoped>
.content {
   overflow: hidden;
}
.grid {
   display: flex;
   flex-wrap: wrap;
   height: calc(100% - 80px);
   overflow-y: auto;
   
   &_item {
      margin: 10px;
      box-sizing: border-box;
   }
   
   image {
      width: 100%;
      height: 100%;
   }
}
.border {
   border: 1px solid #0aa679;
   box-sizing: border-box;
}

.buttons {
   position: absolute;
   height: 40px;
   padding-top: 10px;
   background-color: #fff;
   box-shadow: 0 -2px 2px rgba($color: #000000, $alpha: .3);
}
</style>
